<template>
<div>
  <h1>货物类型展示</h1>
  <el-table
    :data="tableData"
    style="width: 100%">

    <el-table-column
      label="名称"
      width="100">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
      </template>
    </el-table-column>

    <el-table-column
      label="创建时间"
      width="240">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="更新时间"
      width="240">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.alter_time }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="描述"
      width="240">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.sign }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <Button @click="genrelist(i)" v-for="(i,index) in page_range" color="green">{{i}}</Button>
</div>  
</template>
<style>

</style>
<script>
import { genrelist_post,genredelete_post } from './axios_api/api';
  export default {
    data() {
      return {
        tableData: [],
        page_range:''
      }
    },
    mounted(){
        this.genrelist();
    },
    methods: {
        genrelist(i){
            var data = {i:i}
            genrelist_post(data).then(resp=>{
                this.tableData = resp.goodslist;
                this.page_range = resp.page_range
            })
        },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(id) {
        console.log(id);
        var data = {id:id};
        var type = localStorage.getItem('type')
        if(type==5){
          genredelete_post(data).then((res)=>{
                if(res.code==200)
                {
                    alert('删除成功');
                    location.reload();
                }else{
                    alert('删除出错，请稍后再试')
                }
            })
        }else{
          this.$Message("权限不足")
        }
      }
    }
  }
</script>